<template>
	<div class="container">
		<el-dialog
		  :title="title + '用户'"
		  :visible.sync="dialogVisible"
		  width="30%"
		  :before-close="handleClose">
		  <el-form ref="form" :model="form" label-width="80px">
			   <el-form-item label="用户名">
			      <el-input v-model="form.name"></el-input>
			    </el-form-item>
			   <el-form-item label="邮箱">
			      <el-input v-model="form.email"></el-input>
			    </el-form-item>
				 <el-form-item label="密码">
				    <el-input show-password v-model="form.password"></el-input>
				  </el-form-item>
		  </el-form>
		  <span slot="footer" class="dialog-footer">
		    <el-button @click="handleClose">取 消</el-button>
		    <el-button type="primary" @click="onSubmit">确 定</el-button>
		  </span>
		</el-dialog>
	</div>
</template>

<script>
	import * as user from "@/api/user.js";//引入
	export default {
		data(){
			return {
				dialogVisible: false,
				form: {
					id: "",
					name: "",
					email: "",
					password: "",
				},
				type: 'add'
			}
		},
		computed:{
			title() {
				return this.type == 'add' ? '添加' : "编辑"
			}
		},
		methods: {
			open(row, type){
				this.dialogVisible = true
				this.type = type
				if(type == 'edit'){
					this.form = row
				}else{
					this.form = {
						id: "",
						name: "",
						email: "",
						password: "",
					}
				}
			},
			handleClose(){
				this.dialogVisible = false
			},
			onSubmit(){
				let method = this.type == 'add' ? 'add' : 'update'
				user[method](this.form).then(res => {
					if(res.code == 200){
						this.$message.success(res.message)
						this.handleClose()
						this.$emit("close")
					}
				})
			}
		}
	}
</script>

<style>
</style>